.page { height: 100%; display: flex; .left { width: 0.9rem; box-sizing: border-box; height: 100%; overflow: auto; padding: 0.1rem 0.1rem 0.1rem 0.1rem; } .right { flex: 1; min-width: 0; padding: 0.1rem 0.1rem 0.2rem 0; overflow: auto; .rightBox { display: grid; grid-template-columns: repeat(3, auto); grid-gap: 5px; } } .gameCard { // aspect-ratio: 149/234; height: 1.2rem !important; :global(.adm-image) { height: 100% !important; } } .providerItem { background-color: #2b353f; border-radius: 0.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin-bottom: 0.1rem; height: 0.7rem; box-sizing: border-box; position: relative; overflow: hidden; &::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #2b353f; z-index: 1; border-radius: 0.1rem; } &:after { content: ""; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; background: #2b353f; z-index: 2; border-radius: 0.1rem; } &.active { &::before { background: linear-gradient(to bottom, #a6dfd4, #18bd73); } &::after { background: linear-gradient(45deg, #11994d, #178b5f); } } img { position: relative; z-index: 3; width: 0.4rem; } div { position: relative; z-index: 3; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-weight: bold; } } }